{% extends 'admin/base/base.html' %}

{% block title %}
    添加 banner
{% endblock %}

{% block content_header %}
    添加 banner
{% endblock %}

{% block header_option_desc %}
    添加 banner
{% endblock %}


{% block content %}
    <style>
        .banner-img {
            width: 328px;
            height: 82px;
        }

        .banner-img img {
            width: 100%;
            max-height: 100%;
        }

        .banner-info {
            margin-left: 20px;
        }

        .form-group {
            width: 500px;
        }

        ul.banner-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul.banner-list li.banner-item {
            margin-top: 20px;
        }

        @media screen and (max-width: 1100px) {
            .form-group {
                margin-top: 15px;
            }

            .banner-info {
                margin: 0;
            }
        }
    </style>
    <div class="row">
        <div class="col-lg-6">
            <button class="btn btn-primary pull-left" id="banner-add-btn"><i class="fa fa-plus"></i> 添加轮播图</button>
            <ul class="pull-left tips" style="line-height: 18px;">
                <li>支持 JPG/PNG 格式的图片 最多可上传6张</li>
                <li>图片的宽度最好在800px以上，比例为4:1</li>
            </ul>
        </div>
    </div>
    <ul class="banner-list">

        {% for one_banner in banners %}

            <li class="box banner-item box-primary" data-banner-id="{{ one_banner.id }}">
                <div class="box-header">
                    <span>当前优先级为：<span class="priority-number">{{ one_banner.priority }}</span></span>
                    <a href="javascript:void(0);" class="btn btn-danger btn-xs pull-right close-btn">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <div class="box-body">
                    <div class="pull-left banner-img">
                        <input type="file" name="banner-image-select" style="display: none;">
                        <img src="{{ one_banner.image_url }}" class="img-thumbnail banner-image">
                    </div>
                    <div class="pull-left banner-info">

                        <div class="form-group">
                            <label for="priority" class="control-label"
                                   style="margin-bottom: 10px">选择优先级(第一级最高)：</label>
                            <div>

                                <select name="priority" id="priority" class="form-control">
                                    <option value="0">--请选择优先级--</option>

                                    {% for id, value in priority_dict.items %}

                                        {% if id == one_banner.priority %}
                                            <option value="{{ id }}" selected>{{ value }}</option>
                                        {% else %}
                                            <option value="{{ id }}">{{ value }}</option>
                                        {% endif %}

                                    {% endfor %}

                                </select>

                            </div>
                        </div>

                    </div>
                </div>
                <div class="box-footer">
                    <button class="btn btn-primary pull-right update-btn" data-image-url="{{ one_banner.image_url }}"
                            data-priority="{{ one_banner.priority }}">更新
                    </button>
                </div>
            </li>

        {% endfor %}

    </ul>
{% endblock %}

{% block script %}
    <script src="../../../static/js/admin/news/news_banner.js"></script>
{% endblock %}
